<template>
  <div class="login-by-phone">
    <div class="flex-row">
      <div>手机号：</div>
      <div><el-input v-model="phoneNum"></el-input></div>
    </div>
    <div class="flex-row">
      <div>验证码：</div>
      <div>
        <el-input v-model="captcha"></el-input>
      </div>
    </div>
    <div class="code-box">
      <el-button @click="goToLogin" :disabled="loginBtnStatus">登录</el-button>
      <span v-if="status == 1" @click="goToGetCode" class="code-txt"
        >获取验证码</span
      >
      <span v-if="status == 2" @click="goToGetCode" class="code-txt"
        >重新发送</span
      >
      <span v-if="status == 3">{{ num }}</span>
    </div>
  </div>
</template>

<script>
import {
  getPhoneCode,
  phoneLogin,
} from "@/api/xxl-demo-example/login-by-phone/index.js";
/*
    需求分析：
      获取验证码接口
      登录接口
   */
export default {
  data() {
    return {
      phoneNum: "",
      captcha: "",
      status: 1,
      timer: null,
      num: 60,
    };
  },
  created() {},
  destroyed() {
    this.resetTimer();
  },
  computed: {
    loginBtnStatus() {
      return this.phoneNum == "" || this.captcha == "";
    },
  },
  methods: {
    async goToLogin() {
      const params = {
        phoneNum: this.phoneNum,
        captcha: this.captcha,
      };
      const res = await phoneLogin(params);
    },
    async goToGetCode() {
      const params = {
        phoneNum: this.phoneNum,
      };
      const res = await getPhoneCode(params);
      // this.status = 3
      // this.timer = setInterval(()=>{
      //   this.num-=1
      //   if(this.num <= 0){
      //     this.resetTimer()
      //   }
      // },1000)
    },
    resetTimer() {
      clearInterval(this.timer);
      this.num = 60;
      this.status = 2;
    },
  },
};
</script>
<style lang="scss" scoped>
.login-by-phone {
  width: 250px;
}
.code-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 250px;
}
.flex-row {
  display: flex;
  align-items: center;
}
.code-txt {
  cursor: pointer;
}
</style>
